<template>
	<div>
		<u-cell-group>
			<u-cell-item class="step-title" title="商品信息" :arrow="false">
			</u-cell-item>
			<u-cell-item @click="categoryFlage = true" title="商品品类" :value="categorys || '请选择'"></u-cell-item>
			<u-cell-item @click="goodsCategoryFlage = true" title="商品类型" :value="goodsData.goodsType.label || '请选择'">
			</u-cell-item>

		</u-cell-group>
		<div class="box">
			<div class="submit" @click="selectGoodsTemp()">商品模版</div>
			<div class="next" @click="next()">下一步</div>
		</div>

		<!-- 商品类型 -->
		<u-select confirm-color="#333" :list="goodsTypeList" @confirm="confirmGoodsType" v-model="goodsCategoryFlage">
		</u-select>
		<!-- 商品品类 -->
		<u-select mode="mutil-column-auto" @confirm="confirmCategory" confirm-color="#333" v-model="categoryFlage"
			:list="categoryList"></u-select>
	</div>
</template>

<script>
	import {
		getGoodsCategoryAll
	} from "@/api/goods";
	export default {
		data() {
			return {
				categorys: "", //商品分类显示内容
				// 商品品类
				goodsData: {
					// 商品分类选择数组
					category: [],
					// 商品类型
					goodsType: {},
				},

				// 商品类型
				goodsType: "",
				goodsTypeList: [{
						label: "实物商品",
						value: "PHYSICAL_GOODS",
					},
					{
						label: "虚拟商品",
						value: "VIRTUAL_GOODS",
					},
				],
				// 商品类型选择开关
				goodsCategoryFlage: false,
				// 分类类型选择开关开关
				categoryFlage: false,

				/** 分类列表*/
				categoryList: [],
			};
		},
		mounted() {
			this.init();
		},
		methods: {
			// 选择商品模版
			selectGoodsTemp() {
				uni.navigateTo({
					url: '/pages/goods/step/goodsTemplate'
				})
			},
			// 回调商品类型
			confirmGoodsType(array) {
				this.goodsData.goodsType = array[0];
			},
			// 回调商品分类选择
			confirmCategory(array) {
				console.log(array);
				this.categorys = ""
				this.goodsData.category = []
				array.forEach((item) => {
					this.categorys += item.label + "-";
					this.goodsData.category.push(item);
				});
				//   切割最后一个 -
				this.categorys = this.categorys.substr(0, this.categorys.length - 1);
			},
			// 下一步
			next() {
				const {
					category,
					goodsType
				} = this.goodsData;
				if (category.length == 0 || !goodsType.value) {
					uni.showToast({
						title: "请选择商品品类和类型",
						duration: 2000,
						icon: "none",
					});
					return;
				} else {
					// 将选择的值回调给父级
					this.$emit("changed", {
						category: category,
						goodsType: goodsType.value,
					});
				}
			},

			// 初始化本组件
			async init() {
				// 商城商品分类
				uni.showLoading({
					mask:true
				})
				let res = await getGoodsCategoryAll();
				if (res.data.success && res.data.result) {
					this.categoryList = this.getList(res.data.result)
					uni.hideLoading()
					console.log(this.getList(res.data.result));
				}
			},
			//获取商品品类数组
			getList(arr){
				
				return	arr.reduce((obj,item)=>{
					if(item.children && item.children.length){
						return [
							...obj,
							{
								value: item.id,
								label: item.name,
								children: item.children.map(child=>{
									if(child.children && child.children.length){
										return {
											value: child.id,
											label: child.name,
											children:this.getList(child.children)
										}
									}
									return {
										value: child.id,
										label: child.name,
									}
								})
							}
						]
					}
					return [
						...obj,
						{
							value: item.id,
							label: item.name,
						}
					]
				},[])
			}
		},
	};
</script>

<style lang="scss" scoped>
	@import "./style.scss";

	.submit {
		background: #666;
	}

	.next {
		background: #333;
		border-radius: 20rpx;
		height: 72rpx;
		color: #fff;
		text-align: center;
		margin: 40rpx auto 0 auto;
		line-height: 72rpx;
	}
</style>
